Menambahkan Kelas pada HTML

Tutorial HTML; Diperbarui tanggal: 9/09/2025

Atribut class digunakan untuk memberikan nama kelas ke elemen HTML tertentu sehingga elemen tersebut dapat diidentifikasi dan dimanipulasi dengan lebih mudah menggunakan CSS atau JavaScript.

Setiap elemen HTML dapat memiliki satu atau lebih kelas, dan setiap kelas harus memiliki nama yang unik dalam satu dokumen HTML. Nama kelas biasanya ditulis dalam huruf kecil dan dipisahkan dengan spasi jika ada lebih dari satu kelas.

Berikut adalah contoh penggunaan atribut class pada elemen HTML:

<!DOCTYPE html>
 <html>
  <head>
   <style>
    .intro {
      color: blue;
      font-weight: bold;
   }
   .content {
     color: black;
     font-style: italic;
   }
  </style>
 </head>
 <body>
  <p class="intro">Ini adalah sebuah paragraf pengantar.</p>
  <p class="content">Ini adalah isi dari paragraf.</p>
 </body>
</html>

Kode HTML diatas akan menghasilkan keluaran sebagai berikut:

Ini adalah sebuah paragraf pengantar.

Ini adalah isi dari paragraf.

Kelas Dapat Digunakan untuk Lebih dari Satu Elemen

Setiap elemen dapat memiliki kelas yang sama jika memiliki property atau gaya yang sama. Contoh:

<!DOCTYPE html>
 <html>
  <head>
   <style>
    .intro {
      color: blue;
      font-weight: bold;
   }
   .content {
     color: black;
     font-style: italic;
   }
  </style>
 </head>
 <body>
  <p class="intro">Ini adalah sebuah paragraf pengantar.</p>
  <p class="content">Ini adalah isi dari paragraf 1.</p>
  <p class="content">Ini adalah isi dari paragraf 2.</p>
 </body>
</html>

Kode HTML diatas akan menghasilkan keluaran sebagai berikut:

Ini adalah sebuah paragraf pengantar.

Ini adalah isi dari paragraf 1.

Ini adalah isi dari paragraf 2.

Setiap Elemen Dapat Memiliki Lebih dari Satu Kelas

Elemen HTML dapat memiliki lebih dari satu kelas.

Untuk mendefinisikan beberapa kelas, nama kelas dipisahkan dengan spasi, mis. <div class="intro content">. Elemen nantinya akan memiliki style sesuai dengan semua kelas yang ditentukan.

  <head>
   <style>
    .intro {
      color: blue;
      font-weight: bold;
   }
   .content {
     font-style: italic;
   }
  </style>
 </head>
 <body>
  <p class="intro content">Ini adalah sebuah paragraf pengantar.</p>
  <p class="content">Ini adalah isi dari paragraf.</p>
 </body>
</html>

Kode HTML diatas akan menghasilkan keluaran sebagai berikut:

Ini adalah sebuah paragraf pengantar.

Ini adalah isi dari paragraf.